package com.heiko.bloom

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FilterList
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import com.heiko.bloom.components.ItemGarden
import com.heiko.bloom.components.SearchBar
import com.heiko.bloom.components.ThemeCard
import com.heiko.bloom.data.ImageItem
import com.heiko.bloom.ui.theme.*

val navList = listOf(
    ImageItem("Home", R.drawable.ic_home),
    ImageItem("Favorites", R.drawable.ic_favorite_border),
    ImageItem("Profile", R.drawable.ic_account_circle),
    ImageItem("Cart", R.drawable.ic_shopping_cart)
)
val gardenList = listOf(
    ImageItem("Monstera", R.drawable.monstera),
    ImageItem("Aglaonema", R.drawable.aglaonema),
    ImageItem("Peace lily", R.drawable.peace_lily),
    ImageItem("Fiddle leaf", R.drawable.fiddle_leaf),
    ImageItem("Snake plant", R.drawable.snake_plant),
    ImageItem("Pothos", R.drawable.pothos),
)
val themeList = listOf(
    ImageItem("Desert chic", R.drawable.desert_chic),
    ImageItem("Tiny terrariums", R.drawable.tiny_terrariums),
    ImageItem("Jungle vibes", R.drawable.jungle_vibes),
    ImageItem("Easy care", R.drawable.easy_care),
    ImageItem("Statements", R.drawable.statements),
)

@Composable
fun HomePage(navController: NavHostController, userId: String?) {
    Log.i("HomePage", "userId:$userId")
    Scaffold(bottomBar = {
        BottomBar()
    }) {
        Column {
            SearchBar()
            BloomRowTitle()
            BloomRowList()
            BloomListTitle()
            BloomList()
        }
    }
}

@Preview
@Composable
fun HomePagePreview(){
    Scaffold(bottomBar = {
        BottomBar()
    }) {
        Column {
            SearchBar()
            BloomRowTitle()
            BloomRowList()
            BloomListTitle()
            BloomList()
        }
    }
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
fun BottomBar() {
    BottomNavigation(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp),
        backgroundColor = pink100,
    ) {
        navList.forEach {
            val isSelected = "Home" == it.name
            BottomNavigationItem(selected = isSelected, onClick = { }, icon = {
                Image(
                    painter = painterResource(id = it.resId),
                    contentDescription = "",
                    modifier = Modifier.size(24.dp),
                    colorFilter = ColorFilter.tint(
                        if (isSelected) gray else Color(
                            0xff757575
                        )
                    )
                )
            }, label = {
                Text(
                    text = it.name,
                    style = caption,
                    color = if (isSelected) gray else Color(0xff757575)
                )
            })
        }
    }
}

@Composable
fun BloomListTitle() {
    Box(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
    ) {
        Text(
            text = "Design you home garden",
            modifier = Modifier.align(Alignment.CenterStart),
            style = h1,
        )
        Image(
            imageVector = Icons.Default.FilterList,
            contentDescription = null,
            modifier = Modifier.align(Alignment.CenterEnd),
            colorFilter = ColorFilter.tint(MaterialTheme.colors.onBackground)
        )
    }
}

@Composable
fun BloomList() {
    LazyColumn(content = {
        items(gardenList.size) {
            ItemGarden(it == 0, gardenList[it])
        }
    })
}

@Composable
private fun BloomRowTitle() {
    Text(
        text = "Browse themes",
        modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 6.dp),
        style = h1
    )
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
fun SearchBarPreview(){
    SearchBar()
}

@Composable
fun BloomRowList() {
    LazyRow(content = {
        items(themeList.size) {
            ThemeCard(themeList[it])
        }
    }, modifier = Modifier.padding(start = 10.dp, end = 10.dp, top = 3.dp))
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
fun BloomListPreView() {
    Column {
        BloomListTitle()
        BloomList()
    }
}

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
fun BloomRowPreView() {
    Column {
        BloomRowTitle()
        BloomRowList()
    }
}
